<nm-inner class="no-padding">
    <nm-panel class="drag">
        <nm-toolbar class="form">
            <nm-buttons>
                <nm-button [option]="{icon:'icon-plus', title:'增加'}" (click)="action('add')"></nm-button>
            </nm-buttons>
        </nm-toolbar>
        <div class="dragBox" #dragBox>
            <ng-container *ngFor="let table of list">
                <div class="table" [ngClass]="{'active': active.id===table.id}" cdkDrag cdkDragBoundary=".dragBox"
                    (cdkDragEnded)="dragEnded($event, table)"
                    [style.transform]="'translate3d('+table.transform.x+'px, '+table.transform.y+'px, 0px)'"
                    (mousedown)="action('active', table)">
                    <h5>
                        {{table.description}} - {{table.name}}
                        <span>
                            <i class="icon-edit-2" (click)="action('update', table)"></i>
                            <i class="icon-more-horizontal" (click)="action('more', table, $event)"></i>
                        </span>
                    </h5>
                    <ul>
                        <li *ngFor="let col of table.cols" [ngClass]="{'primary': col.primary}">
                            <p class="label"><span>{{col.label}}</span></p>
                            <p class="name"><span>{{col.name}}</span></p>
                            <p class="type" [title]="col.type.label"><span>{{col.type.key}}</span></p>
                            <p class="length" *ngIf="col.length"><span>{{col.length}}</span></p>
                        </li>
                    </ul>
                </div>
            </ng-container>
        </div>
    </nm-panel>
</nm-inner>

<ng-template #entityTemp>
    <nm-form #entityForm [option]="formOption"></nm-form>
</ng-template>

<ng-template #codeTemp>
    <nm-code [(ngModel)]="entityCode"></nm-code>
</ng-template>